---
type Size = 's' | 'm' | 'l'

interface Props {
  href: string
  color: 'orange' | 'blue' | 'green'
  size?: Size
  class?: string
}

const { href, color = 'orange', size = 'l', class: _class } = Astro.props
const paddings: Record<Size, string> = {
  s: 'px-3 py-1',
  m: 'px-5 py-3',
  l: 'px-7 py-4'
}
const textSizes: Record<Size, string> = {
  s: 'text-sm',
  m: 'text-base',
  l: 'text-lg'
}
const bgColors: Record<Props['color'], string> = {
  orange: 'bg-orange hover:bg-orange-400',
  blue: 'bg-blue hover:bg-blue-400',
  green: 'bg-green hover:bg-green-400'
}

const extras = `${paddings[size]} ${textSizes[size]} ${bgColors[color]}  ${_class}`
---

<a
  {href}
  class={`flex w-fit flex-row gap-3 rounded-md text-center text-white ${extras}`}
>
  <slot />
</a>
